﻿@{
    ViewBag.Title = "EditAlbum";
}

<h2>Edit Album</h2>

<b>Title:</b>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    <input type="text" id ="Title" value="@ViewBag.album.Title"/>
<br />
<br />
<b>Release date:</b>
    <input type="date" id ="ReleaseDate" value="@ViewBag.date"/>
<br />
<br />
<b>Price: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp$</b>
    <input type="text" id ="Price" value="@ViewBag.album.Price"/>
<br />
<br />
<b>Song(s) in album:</b><br />
 @{
        int checkBoxNumber = 0;
        string artist = "";
  }
    <table>
      <col width="300px">
      <col width="300px">
      <col width="100px">
      <col width="100px">
      <col width="200px">
      <col width="150px">
      <col width="200px">
      <col width="200px">
      <col width="100px">
      <col width="100px">
      <col width="100px">
    <tr>
      <td><b>Title</b></td> 
      <td><b>Artist</b></td>
      <td><b>Duration(s)</b></td>
      <td><b>Price</b></td>
      <td><b>ReleaseDate</b></td>
      <td><b>Genre</b></td>
      <td><b>Composer</b></td>
      <td><b>Lyricist</b></td>
    </tr>
    
        @foreach (var song in ViewBag.album.Songs)
        {
               <tr>
            <td>@song.Title</td>
            <td>
                @for (int k = 0; k < song.Artists.Count; k++)
                {
                    if (k == 0)
                    {
                        artist = song.Artists[k].Name;
                    }
                    else
                    {
                        artist = artist + " & " + song.Artists[k].Name;
                    }
                }
              @Html.Raw(artist)
            </td> 
            <td>@song.Duration</td>
            <td>$@song.Price</td>
            <td>@((song.ReleaseDate).Date.ToString("d"))</td>
            <td>@song.Genre</td>
            <td>@song.Composer</td>
            <td>@song.Lyricist</td>
            <td><input type="button" value="Delete song from Album" onclick="DeleteSongFromAlbum(@song.ID)" /></td>
        </tr>
        }
    </table>
<br />
<br />
<br />
Add Songs?
    <select id="ifAddSong">
        <option value="No">No</option>
        <option value="Yes">Yes</option>
    </select>
<br />If yes, pls select song:<br />

<select id="addSong">
    @foreach (var newSong in ViewBag.songs)
    {

        for (int j = 0; j < newSong.Artists.Count; j++)
        {
            if (j == 0)
            {
                artist = newSong.Artists[j].Name;
            }
            else
            {
                artist = artist + " & " + newSong.Artists[j].Name;
            }
        }
        <option value="@newSong.ID">@newSong.Title by @artist</option>
    }
</select>
<br />
<br />
<br />
<br />
<input type="button" value="Update album" onclick="Update()" />





@* -- SCRIPTS -- *@
<script>
    var title = "";
    var releaseDate = "";
    var price = "";
    var newSong = false;
    var addedSongs = 0;

    function Update() {
        title = document.getElementById("Title").value;
        releaseDate = document.getElementById("ReleaseDate").value;
        price = document.getElementById("Price").value;

        var songID;
        
        var addSong = document.getElementById("ifAddSong").value;

        if (addSong == "No") {
            if (title == "" || releaseDate == "" || price == "") {
                alert("Please fill in all fields!");
            }
            newSong = false;
            UpdatePost();
        }
        else {

            newSong = true;
            
            addedSongs = document.getElementById("addSong").value;

            if (title == "" || releaseDate == "" || price == "") {
                alert("Please fill in all fields!");
            }
            else {
                UpdatePost();
            }
        }   
    }

    function UpdatePost() {
        XMLhttp = new XMLHttpRequest();

        XMLhttp.open("POST", "/Products/EditAlbumAjax", true);
        XMLhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        XMLhttp.onreadystatechange = UpdateReqReady;
        sendStr = "albumID=" + @ViewBag.album.ID + "&title=" + title + "&releaseDate=" + releaseDate + "&price=" + price + "&addSong=" + newSong + "&newSongID=" + addedSongs;
        XMLhttp.send(sendStr);
    }
    

    function UpdateReqReady() {
        if (XMLhttp.readyState == 4 && XMLhttp.status == 200) {
            //status is inside
            alert(XMLhttp.responseText);
            document.getElementById("refresh").click();

        } else if (XMLhttp.readyState == 4) {
            alert("error! code: " + XMLhttp.status);
        }
    }

    function DeleteSongFromAlbum(songID)
    {
        XMLhttpDelete = new XMLHttpRequest();

        XMLhttpDelete.open("POST", "/Products/DeleteSongFromAlbumAjax", true);
        XMLhttpDelete.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        XMLhttpDelete.onreadystatechange = DeleteSongFromAlbumReqReady;
        sendStrDelete = "albumID=" + @ViewBag.album.ID + "&songID=" + songID;
        XMLhttpDelete.send(sendStrDelete);
    }
    function DeleteSongFromAlbumReqReady() {
        if (XMLhttpDelete.readyState == 4 && XMLhttpDelete.status == 200) {
            //status is inside
            alert(XMLhttpDelete.responseText);
            if(XMLhttpDelete.responseText == "Successfully deleted song from album!")
                document.getElementById("refresh").click();

        } else if (XMLhttpDelete.readyState == 4) {
            alert("error! code: " + XMLhttpDelete.status);
        }
    }
</script>


<form action="/Products/EditAlbum" method="post">
    <input type="text" name="albumID" value="@ViewBag.album.ID" hidden="hidden"/>
    <input type="submit" id="refresh" hidden="hidden"/>
</form>